<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <button @click="splitImage">Split Image</button>
    <div v-for="(imageData, index) in splitImages" :key="index">
      <img :src="imageData" alt="Split Image" />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "ImageSplitter",
  data() {
    return {
      originalImage: null,
      splitImages: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.originalImage = event.target.files[0];
    },
    splitImage() {
      if (!this.originalImage) {
        alert("Please select an image file first.");
        return;
      }

      const reader = new FileReader();
      reader.onload = event => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          const chunkHeight = 1334; // Adjust as needed

          const numChunks = Math.ceil(img.height / chunkHeight);
          const splitImages = [];

          for (let i = 0; i < numChunks; i++) {
            canvas.width = img.width;
            canvas.height = Math.min(chunkHeight, img.height - i * chunkHeight);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(
              img,
              0,
              i * chunkHeight,
              canvas.width,
              canvas.height,
              0,
              0,
              canvas.width,
              canvas.height
            );
            splitImages.push(canvas.toDataURL());
          }
          this.splitImages = splitImages;
        };
        img.src = event.target.result;
      };

      reader.readAsDataURL(this.originalImage);
    }
  }
};
</script>

<style>
/* Add your CSS styles here */
</style>
